<script setup>
import MarkdownEditor from '@/components/markdown/MarkdownEditor.vue'
import { nextTick, ref } from 'vue'

const articleTitle = ref('')
const articleContent = ref('')
const isEditing = ref(false)
const titleInput = ref(null)
const enableEditing = () => {
  isEditing.value = true
  nextTick(() => {
    titleInput.value?.focus()
  })
}
const disableEditing = () => {
  isEditing.value = false
}
</script>

<template>
  <div class="publish-blog">
    <!-- 顶部信息区 -->
    <div class="top">
      <div class="title-box">
        <span class="title" v-if="!isEditing" @click="enableEditing">
          {{ articleTitle || '点击编辑标题' }}
        </span>
        <el-input
          v-else
          class="title-input"
          ref="titleInput"
          v-model="articleTitle"
          @blur="disableEditing"
          placeholder="请输入内容"
          clearable
        />
      </div>

      <div class="right">
        <el-button type="primary" size="large" @click="submitArticle()">发布博文</el-button>
        <el-button type="primary" size="large" text bg>保存草稿</el-button>
        <el-button type="primary" size="large" text bg>导入文件（.md）</el-button>
        <el-button type="primary" size="large" text bg>导出文件（.md）</el-button>
      </div>
    </div>

    <!-- Markdown编辑区 -->
    <div class="bottom">
      <MarkdownEditor v-model="articleContent" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.publish-blog {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #efefef;
  .top {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 0 50px;
    border-bottom: 1px solid #ccc;

    .title-box {
      display: flex;
      align-items: center;
      font-size: 24px;
      .title {
        font-weight: 500;
        color: #a7a7a7;
      }

      .title-input {
        width: 100%;
        height: 60%;
      }
    }

    :deep(.el-input__wrapper) {
      border: none;
      box-shadow: none;
      border-radius: 0;
      font-size: 20px;
    }
  }
}
</style>
